<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :append-to-body="false"
    :class="{'mobile-el-dialog': showMobilePage}"
    class="supplier-create-dialog"
    lock-scroll
    modal-append-to-body
    @close="handleDialogClose"
  >
    <div v-loading="initLoading" :class="{'mobile-create-supplier' : showMobilePage}" class="main">
      <div class="create-info-box">
        <el-form
          ref="formRef"
          :model="paramsObj"
          :rules="formRules"
          label-width="100px"
          class="lineHeight32">
          <el-row>
            <el-col v-if="isModify" :span="24">
              <el-form-item label="修改说明" prop="modifyDesc">
                <el-input v-model="paramsObj.modifyDesc" :maxlength="1000" class="width240" type="textarea" placeholder="请输入修改说明" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="flex">
            <DialogTitle title="供应商信息" font-size="16px" style="margin-bottom: 16px;flex: unset;margin-right: 12px;" />
            <span style="line-height: 18px;color: #FF4E5F;font-size: 12px;">供应商名称和类型保存后无法修改，请填写准确、完整。</span>
          </div>
          <el-row type="flex" class="response-el-row" style="max-width: 100%">
            <el-col :span="rowSpan">
              <el-form-item label="供应商类型" prop="supplierType">
                <el-radio-group v-model="paramsObj.supplierType" :disabled="isEdit && !hasRouteAuth('medium:supplier:editSupplierType')" style="width: 240px" @change="supplierTypeChange">
                  <el-radio :label="0"><span style="font-size:14px;">个人</span></el-radio>
                  <el-radio :label="1"><span style="font-size:14px;">公司</span></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="是否签约" prop="isSignUp">
                <el-radio-group v-model="paramsObj.isSignUp" style="width: 240px">
                  <el-radio :label="true"><span style="font-size:14px;">是</span></el-radio>
                  <el-radio :label="false"><span style="font-size:14px;">否</span></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="供应商名称" prop="channelName">
                <div class="flex-center">
                  <div class="flex-center width240">
                    <el-input :disabled="canEdit" v-model.trim="paramsObj.channelName" :maxlength="50" style="flex: 1;" placeholder="输入供应商名称" type="text" size="small" @change="handleSupplierName" @input="handleInputChange"/>
                    <el-input v-if="isSupplierNameRepeat" v-model.trim="dupNameCode" :disabled="canEdit" placeholder="重名识别号" size="small" maxlength="20" style="width: 95px; margin-left: 8px;" />
                  </div>
                  <InfoIcon :content="isSupplierNameRepeat && !dupNameCode ? '请填写供应商的真实全称（识别号建议手机尾号后4位）' : '请填写供应商的真实全称'" style="width: 16px;height: 16px;margin-left: 4px;" />
                </div>
                <span v-if="isSupplierNameRepeat && !dupNameCode" class="el-form-item__error">供应商名称重复，请输入识别号</span>
                <span v-if="paramsObj.supplierType === 0 && paramsObj.channelName && paramsObj.channelName.includes('公司')" :style="{ 'margin-top': (isSupplierNameRepeat && !dupNameCode) ? '12px' : '0' }" class="el-form-item__error">供应商名称含有“公司”字样，请检查是否有误</span>
                <span v-if="paramsObj.supplierType === 1 && paramsObj.channelName && paramsObj.channelName.length < 6" class="el-form-item__error">供应商名称字数少于6个字，请检查是否有误</span>
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="行业类别" prop="businessType">
                <el-select
                  v-model="paramsObj.businessType"
                  placeholder="请选择"
                  filterable
                  clearable
                  class="width240"
                  size="small">
                  <el-option
                    v-for="item in businessTypeOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="所属部门" prop="departmentId">
                <el-cascader
                  v-model="paramsObj.departmentId"
                  :show-all-levels="false"
                  :options="deptTreeList"
                  :props="{
                    emitPath:false,
                    value: 'id',
                    label: 'name',
                    checkStrictly: true,
                    multiple: false,
                  }"
                  class="width240"
                  placeholder="请选择所属部门"
                  size="small"
                  collapse-tags
                  clearable
                  filterable
                >
                  <template slot-scope="{ data }">
                    <el-tooltip v-if="data.name.length > 14" placement="top-start" effect="dark">
                      <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
                      <span class="inline-tag ellipsisOne">{{ data.name }}</span>
                    </el-tooltip>
                    <span v-else>{{ data.name }}</span>
                  </template>
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="有无费率" prop="priceRate">
                <div class="flex-center" style="position:relative;">
                  <el-switch
                    v-model="paramsObj.hasRate"
                    active-color="#406EFF"
                    class="mr5"
                    @change="rateChange($event)"/>
                  <el-input :min="0" v-model="paramsObj.priceRate" :disabled="!paramsObj.hasRate" type="number" size="small" style="width: 195px;" oninput="if(value>999)value=999" @change="inputChange(paramsObj, 'priceRate')"/>
                  <tipIcon class="ml5 rate-tip" content="无费率默认值为1，有费率可自由设置"/>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="标签" prop="tag">
                <TagSelect v-model="paramsObj.tag" :module-type="TAG_MODULES.SETTLE_SUPPLIER" class="width240" />
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="可抵扣税率" prop="taxRate">
                <el-input
                  v-model="paramsObj.taxRate"
                  name="taxRate"
                  class="width240"
                  size="small"
                  @input="deductionRateInput"
                >
                  <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <DialogTitle title="个人信息" font-size="16px" style="margin: 12px 0 16px" />
          <el-row class="response-el-row" type="flex">
            <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
              <el-form-item label="纳税人识别号" prop="taxpayerIdentificationNumber">
                <el-input v-model="paramsObj.taxpayerIdentificationNumber" :maxlength="50" class="width240" placeholder="输入纳税人识别号" type="text" size="small" />
              </el-form-item>
            </el-col>
            <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
              <el-form-item label="营业执照" prop="idCard">
                <div class="width240">
                  <upAttachment
                    ref="uploadImg"
                    :hide-confirm="true"
                    :file-list="paramsObj.idCard"
                    import-api="/common/file/upload"
                    btn-text="上传文件"
                    @complateSetData="complateSetData($event, 'idCard')"
                    @removeFileList="removeFileList($event, 'idCard')"
                    @downloadSuccess="downloadSuccess" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="rowSpan">
              <el-form-item label="微信号" prop="wxCode">
                <el-input v-model="paramsObj.wxCode" :maxlength="20" class="width240" placeholder="输入微信号" type="text" size="small" />
              </el-form-item>
            </el-col>
            <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
              <el-form-item label="合作状态" prop="cooperationStatus">
                <el-radio-group v-model="paramsObj.cooperationStatus" style="width: 240px">
                  <el-radio :label="0"><span style="font-size:14px;">正常合作</span></el-radio>
                  <el-radio :label="1"><span style="font-size:14px;">终止合作</span></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="paramsObj.sex" style="width: 240px">
                  <el-radio :label="0"><span style="font-size:14px;">男</span></el-radio>
                  <el-radio :label="1"><span style="font-size:14px;">女</span></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
              <el-form-item label="身份证" prop="idCard">
                <div class="width240">
                  <upAttachment
                    ref="uploadImg"
                    :hide-confirm="true"
                    :file-list="paramsObj.idCard"
                    import-api="/common/file/upload"
                    btn-text="上传文件"
                    @complateSetData="complateSetData($event, 'idCard')"
                    @removeFileList="removeFileList($event, 'idCard')" />
                </div>
              </el-form-item>
            </el-col>
            <!-- <el-col v-if="!paramsObj.supplierType" :span="rowSpan" class="published-status">
              <el-form-item label="刊例状态" prop="publishedStatus">
                <el-radio-group v-model="paramsObj.publishedStatus">
                  <el-radio :label="0"><span style="font-size:14px;">正常上刊</span></el-radio>
                  <el-radio :label="1"><span style="font-size:14px;">解约下刊</span></el-radio>
                  <el-radio :label="2"><span style="font-size:14px;">处罚停刊</span></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col> -->
            <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
              <el-form-item label="身份证号 " prop="identityNumber">
                <el-input v-model="paramsObj.identityNumber" :maxlength="20" class="width240" placeholder="输入身份证号" type="text" size="small" onkeyup="value=value.replace(/[\W]/g,'')" />
              </el-form-item>
            </el-col>
            <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="paramsObj.phone" :maxlength="20" class="width240" placeholder="输入手机号码" type="text" size="small" />
              </el-form-item>
            </el-col>
            <el-col v-if="paramsObj.supplierType === 1" :span="rowSpan">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="paramsObj.remark" :maxlength="1000" resize="none" class="width240" placeholder="请简单介绍该供应商" type="textarea" size="small" />
              </el-form-item>
            </el-col>
            <el-col v-if="!paramsObj.supplierType" :span="rowSpan">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="paramsObj.remark" :maxlength="1000" class="width240" resize="none" placeholder="请简单介绍该供应商" type="textarea" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <SupplierAccountTable
          v-if="!isEdit"
          :is-create-account="true"
          :show-mobile-page="showMobilePage"
          :accounts-receivable="accountsReceivable"
          :supplier-type="paramsObj.supplierType"
          is-show-account
          class="padding0"
          @addData="addData"
          @delData="delData"
          @editData="editData" />
      </div>
    </div>
    <div class="dialog-footer">
      <el-button v-if="isModify" :loading="fetchLoading" type="primary" size="small" @click="submit()">发起审批</el-button>
      <el-button v-else :loading="addLoading || initLoading" type="primary" size="small" @click="submit()">{{ isEdit ? '保存' : '确定' }}</el-button>
      <el-button class="cancel-btn-style" size="small" style="width: 80px" @click="handleDialogClose()">取消</el-button>
    </div>
    <SelectApprover ref="selectApproverRef" @approverSelected="supplierModify" />
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import SupplierAccountTable from '../components/supplierAccountTable';
import { TAG_MODULES } from '@/utils/const';
import { getDepartmentAll } from '@/api/config';
import { percentRate } from '@/utils/numFormat';
import TagSelect from '@/components/Common/tagSelect';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import { mapState } from 'vuex';
import SelectApprover from '../components/selectApprover';
import { hasRouteAuth } from '@/utils/permission';
import ElMessage from '@/utils/message';
import { supplierAdd, supplierEdit, supplierModify, getBusinessType, isRepeatSupplier, downloadRecord } from '@/api/supplier';
import { getClientInfo } from '@/api/customer';
import { SUPPLIER_DETAIL_TYPE, SUPPLIER_MODIFY_STATUS } from '@/utils/const/supplier';
import upAttachment from '@/components/Common/upAttachment/index';
export default {
  components: {
    DialogTitle,
    selectWithoutHttp,
    TagSelect,
    upAttachment,
    SelectApprover,
    SupplierAccountTable
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const initParams = {
      createUser: '',
      departmentId: '',
      supplierType: '',
      channelName: '',
      cooperationStatus: 0,
      taxpayerIdentificationNumber: '',
      publishedStatus: 0,
      identityNumber: '',
      sex: 0,
      taxRate: '',
      region: '',
      address: '',
      phone: '',
      wxCode: '',
      idCard: [],
      signedScreenshot: [],
      remark: '',
      tag: [],
      signStatus: '',
      addressList: [],
      accountsInfoList: [],
      approverId: null,
      approvalStatus: '',
      businessType: '',
      hasRate: false,
      priceRate: 1
    };
    return {
      dialogVisible: false,
      id: null,
      isModify: false,
      dupNameCode: '',
      paramsObj: JSON.parse(JSON.stringify(initParams)),
      initParams: JSON.parse(JSON.stringify(initParams)),
      isSupplierNameRepeat: false,
      accountsReceivable: {
        isOpenCloud: true,
        list: []
      },
      addLoading: false,
      fetchLoading: false,
      initLoading: false,
      TAG_MODULES,
      deptTreeList: [],
      businessTypeOptions: [],
      articlesStatusOptions: [{ id: 0, label: '正常上刊' }, { id: 1, label: '解约下刊' }, { id: 2, label: '处罚停刊' }],
      cooperationStatusOptions: [{ id: 0, label: '正常合作' }, { id: 1, label: '终止合作' }]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'userInfo': state => state.user.userInfo
    }),
    rowSpan() {
      return this.showMobilePage ? 24 : 12;
    },
    canEdit() {
      return !!(!this.hasRouteAuth('medium:supplier:editSupplierName') && this.isEdit);
    },
    formRules() {
      const obj = {
        supplierType: [{ required: true, trigger: 'change', message: '请选择供应商类型' }],
        channelName: [{ required: true, trigger: 'change', message: '请输入供应商名称' }],
        departmentId: [{ required: true, trigger: 'change', message: '请选择所属部门' }],
        isSignUp: [{ required: true, trigger: 'change', validator: this.validateName('请选择是否签约') }],
        businessType: [{ required: true, trigger: 'change', message: '请选择行业类别' }],
        priceRate: [{ required: true, trigger: 'blur', message: '请填写费率' }]
      };
      if (this.isModify) {
        obj.modifyDesc = [{ required: true, trigger: 'blur', message: '请输入修改说明' }];
      }
      if (this.isSupplierNameRepeat) {
        obj.phone = [{ required: true, trigger: 'blur', message: '请输入手机号' }];
      }
      return obj;
    }
  },
  methods: {
    hasRouteAuth,
    validateName(msg) {
      return (rule, value, callback) => {
        const name = this.paramsObj.isSignUp;
        if (!name && name !== false) { callback(new Error(msg)); } else { callback(); }
      };
    },
    handleInputChange(val) {
      let str;
      str = val.replace(/[()]/g, ''); // 去除英文括号
      str = str === '' ? null : str;
      this.paramsObj.channelName = str;
      const changeFunc = _.debounce(this.handleSupplierName, 100);
      changeFunc(str);
    },
    downloadSuccess(name) {
      const params = {
        id: this.supplierId,
        name
      };
      downloadRecord(params).then(res => {
        if (res.code === 200) {
          this.$emit('updateLog');
        }
      });
    },
    handleSupplierName(name) {
      if (this.paramsObj.supplierType === 0 && name) {
        const params = {
          name,
          type: this.paramsObj.supplierType
        };
        if (this.isEdit) {
          params.id = this.id;
        }
        isRepeatSupplier(params).then(res => {
          this.isSupplierNameRepeat = res.code === 501;
          this.$nextTick(() => {
            this.$refs.formRef.clearValidate('isSignUp');
            this.$refs.formRef.clearValidate('phone');
          });
        });
      }
    },
    init(data, isModify) {
      if (isModify) {
        this.isModify = isModify;
      }
      this.dialogVisible = true;
      this.queryDeptTreeList();
      this.getBusinessTypeOptions();
      if (this.isEdit) {
        this.id = Number(this.$route.params.id) || null;
        this.paramsObj = JSON.parse(JSON.stringify(data));
        this.dupNameFormat();
        this.accountsReceivable = data.accountsReceivable;
        this.businessTypeOptions = [{ name: data.businessTypeName, id: data.businessType }]; // default 旧选项可能已经被删除
      } else {
        this.paramsObj.createUser = this.userInfo.userName;
        const departmentAry = this.userInfo.departmentAry;
        if (departmentAry && departmentAry.id && departmentAry.id.length > 0) {
          this.paramsObj.departmentId = departmentAry.id[0][ departmentAry[0].length - 1];
        } else if (this.userInfo.subDepartment && this.userInfo.subDepartment.length > 0 && this.userInfo.subDepartment[0].id) {
          this.paramsObj.departmentId = this.userInfo.subDepartment[0].id;
        } else if (this.userInfo.deptName && this.userInfo.deptName.length > 0 && this.userInfo.deptName[0].id) {
          this.paramsObj.departmentId = this.userInfo.deptName[0].id;
        }
      }
      this.paramsObj.sex = this.paramsObj.sex || 0;
    },
    // 【v3.6.4】客户同步信息初始化值
    syncFromCustomer(id) {
      this.initLoading = true;
      getClientInfo(id).then(res => {
        if (res.code === 200) {
          const { clientType } = res.data;
          this.paramsObj.channelName = res.data['clientName'];
          if (clientType === 0) { // 公司
            this.paramsObj.supplierType = 1;
            this.paramsObj.taxpayerIdentificationNumber = res.data['invoiceInfo']['taxpayerNum']; // 纳税人识别号 - 纳税人识别号
            this.paramsObj.idCard = res.data['invoiceInfo']['taxpayerAttachment']; // 一般纳税证明 - 营业执照
          } else if (clientType === 1) { // 个人
            this.paramsObj.supplierType = 0;
            this.paramsObj.identityNumber = res.data['invoiceInfo']['taxpayerNum']; // 身份证号 - 身份证号
          }
        }
        this.initLoading = false;
      }).catch(() => {
        this.initLoading = false;
      });
    },
    inputChange(row, key) {
      if (row[key]) row[key] = Number(row[key]).toFixed(3);
    },
    deductionRateInput(value) {
      const str = percentRate(value);
      this.paramsObj.taxRate = str;
      this.$emit('changeValue', this.paramsObj);
    },
    dupNameFormat() {
      if (this.paramsObj.channelName.includes('(')) {
        this.isSupplierNameRepeat = true;
        const pattern = /([^(\s]+)\s*\(([^)]+)\)/;
        const result = this.paramsObj.channelName.match(pattern);
        this.paramsObj.channelName = result[1];
        this.dupNameCode = result[2];
      }
    },
    handleDialogClose() {
      // this.$refs['formRef'].resetFields();
      this.paramsObj = JSON.parse(JSON.stringify(this.initParams));
      this.$refs['formRef'].clearValidate();
      this.accountsReceivable.list = [];
      if (this.isModify && this.$route.name === 'supplierManageDetail') {
        this.$router.replace({ name: 'supplierManageDetail' });
      }
      this.isSupplierNameRepeat = false;
      this.dupNameCode = '';
      this.paramsObj.identityNumber = '';
      delete this.paramsObj.isSignUp;
      this.$nextTick(() => {
        this.dialogVisible = false;
      });
    },
    supplierTypeChange() {
      this.isSupplierNameRepeat = false;
      this.paramsObj.phone = '';
      this.paramsObj.taxpayerIdentificationNumber = '';
      this.accountsReceivable.list = [];
      this.paramsObj.identityNumber = '';
      if (this.paramsObj.supplierType === 0) {
        this.paramsObj.publishedStatus = this.articlesStatusOptions[0].id;
      } else {
        this.paramsObj.cooperationStatus = this.cooperationStatusOptions[0].id;
      }
      this.handleSupplierName(this.paramsObj.channelName);
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    // 获取所属部门
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      });
    },
    submit() {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      params.accountsReceivable = JSON.parse(JSON.stringify(this.accountsReceivable));
      if (this.isSupplierNameRepeat) {
        params.channelName += `(${this.dupNameCode})`;
      }
      if (this.flyUserId) {
        params.flyUserId = this.flyUserId;
      }
      const promise = [];
      this.isModify && promise.push();
      promise.push(this.$refs.formRef.validate());
      if (this.$refs.accountListRef) {
        promise.push(this.$refs.accountListRef.validate());
      }
      const dupNameCodeCheck = this.isSupplierNameRepeat ? !!this.dupNameCode : true;
      Promise.all(promise).then(() => {
        if (dupNameCodeCheck) {
          if (this.isModify) {
            // 仅审核中的申请的无需再次选择审批人
            if (this.modifyId && this.paramsObj.approvalStatus === SUPPLIER_MODIFY_STATUS.PENDING) {
              const approverId = this.paramsObj.approverId;
              if (!approverId) {
                this.$message.warning('无法获取审批人id');
                return;
              }
              this.supplierModify(approverId);
            } else {
              this.selectApproverShow();
            }
          } else if (this.isEdit) {
            this.edit(params);
          } else {
            this.add(params);
          }
        } else {
          ElMessage.warning('供应商名称重复，请输入识别号（建议手机尾号后4位）');
        }
      }).catch(() => {
        ElMessage.warning('请检查信息是否填写完整');
      });
    },
    add(params) {
      this.addLoading = true;
      if (!params.sex && params.sex !== 0) {
        params.sex = undefined;
      }
      supplierAdd(params).then(res => {
        if (res.code === 200) {
          ElMessage.success('新建成功');
          this.$emit('refresh');
          this.handleDialogClose();
        } else {
          ElMessage.error(res.message);
        }
        this.addLoading = false;
      }).catch(() => {
        this.addLoading = false;
      });
    },
    edit(params) {
      this.addLoading = true;
      params.id = this.id;
      if (!params.sex && params.sex !== 0) {
        params.sex = undefined;
      }
      supplierEdit(this.id, params).then(res => {
        if (res.code === 200) {
          ElMessage.success(this.isModify ? '发起审批成功' : '编辑成功');
          this.$emit('refresh');
          this.handleDialogClose();
        } else {
          ElMessage.error(res.message);
        }
        this.addLoading = false;
      }).catch(() => {
        this.addLoading = false;
      });
    },
    selectApproverShow() {
      this.$refs['selectApproverRef'].init();
    },
    supplierModify(approverId) {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      this.modifyId && (params.id = this.modifyId); // 修改审批单id(修改申请审批)
      params.supplierId = this.id;
      params.approverId = approverId;
      this.fetchLoading = true;
      supplierModify(params).then(_ => {
        this.$message.success('操作成功');
        const routeData = { name: 'supplierManageDetail' };
        this.fetchLoading = false;
        if (this.modifyId) {
          routeData.params = { id: this.modifyId };
          routeData.query = { type: SUPPLIER_DETAIL_TYPE.MODIFY };
        } else {
          routeData.params = { id: this.id };
        }
        this.$router.push(routeData);
      }).catch(err => {
        console.error(err);
        this.fetchLoading = false;
      });
    },
    complateSetData({ data, fileName }, key) {
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      if (this.paramsObj[key]) {
        this.paramsObj[key].push(fileList);
      } else {
        this.$set(this.paramsObj, key, [fileList]);
      }
    },
    removeFileList({ file, index }, key) {
      this.paramsObj[key].splice(index, 1);
    },
    addData(data) {
      this.accountsReceivable.list.push(data);
    },
    delData(index) {
      if (index < this.accountsReceivable.list.length) {
        this.accountsReceivable.list.splice(index, 1);
      }
    },
    editData(data, index) {
      const temp = JSON.parse(JSON.stringify(this.accountsReceivable.list));
      temp[index] = data;
      this.$set(this.accountsReceivable, 'list', temp);
    },
    getBusinessTypeOptions() {
      getBusinessType().then(res => {
        if (res.code === 200) {
          this.businessTypeOptions = res.data;
          const otherObj = this.businessTypeOptions.find(it => it.name === '其他');
          if (otherObj) {
            this.paramsObj.businessType = otherObj.id;
          }
        }
      }).catch(error => console.error(error));
    },
    rateChange(val) {
      if (val) {
        this.paramsObj.priceRate = 1.065;
      } else {
        this.paramsObj.priceRate = 1;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  .width240 {
    width: 240px;
  }
  &.mobile-create-supplier {
    .width240 {
      width: 200px;
    }
    .create-info-box {
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
  .create-info-box {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow: auto;
    padding-right: 26px;
    @include scrollBar($x: hidden, $y: auto, $width: 6px);
    .income-form-box {
      margin-right: 16px;
    }
    .rate-tip {
      position: absolute;
      right: -20px;
      width: 16px !important;
      height: 16px !important;
    }
    &::v-deep {
      .el-form-item {
        margin-bottom: 20px !important;
      }
      .el-col-12:nth-child(2n) { // ui要求右对齐
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .published-status {
    ::v-deep {
      .el-radio {
        margin-right: 12px !important;
      }
    }
  }
}
.mobile-el-dialog {
  &::v-deep {
    .el-dialog {
      min-width: unset !important;
    }
  }
}
.supplier-create-dialog {
  &::v-deep {
    .el-dialog {
      border-radius: 8px;
      min-width: 800px;
    }
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding-bottom: 24px;
      padding-top: 16px;
      padding-right: 4px;
    }
    .el-form-item {
      .select-component-withouthttp {
        width: 100%;
      }
      .el-textarea__inner {
        resize: none;
      }
      .tag-select-container {
        .el-cascader {
          width: 100%;
        }
      }
    }
    .create-account-list {
      margin-bottom: 0px !important;
    }
  }
  .dialog-footer {
    text-align: center;
    padding-top: 12px;
  }
  .published-status {
    .el-radio-group {
      display: flex;
      align-items: center;
      min-height: 32px;
    }
  }
}
.padding0 {
  padding: 0 !important;
}
</style>
